<template>
  <el-card>
    <div class="sale-header">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        size="small"
      >
        <el-tab-pane label="销售额" name="first">User</el-tab-pane>
        <el-tab-pane label="访问量" name="second">Config</el-tab-pane>
      </el-tabs>

      <div class="sales-date">
        <div class="sales-date-radio">
          <el-radio-group v-model="radioValue" @change="handleRadioChange">
            <el-radio-button label="今日" />
            <el-radio-button label="今年" />
            <el-radio-button label="本月" type="pr" />
            <el-radio-button label="本周" />
          </el-radio-group>
        </div>

        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          value-format="YYYY-MM-DD"
        />
      </div>
    </div>
    <div class="sale-footer" ref="saleChart"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XSales",
};
</script>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import type {
  TabsPaneContext,
  SingleOrRange,
  DateModelType,
} from "element-plus";
import dayjs from "dayjs";
import * as echarts from "echarts";

const activeName = ref();
const radioValue = ref("今日");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const handleRadioChange = (val: string | number | boolean) => {
  // console.log(val);
  if (val === "今日") {
    const start = dayjs().format("YYYY-MM-DD");
    date.value = [start, start];
  } else if (val === "本周") {
    const start = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD");
    const end = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD");
    date.value = [start, end];
  } else if (val === "本月") {
    const start = dayjs().startOf("month").format("YYYY-MM-DD");
    const end = dayjs().endOf("month").format("YYYY-MM-DD");
    date.value = [start, end];
  } else {
    const start = dayjs().startOf("year").format("YYYY-MM-DD");
    const end = dayjs().endOf("year").format("YYYY-MM-DD");
    date.value = [start, end];
  }
};

const start = dayjs().format("YYYY-MM-DDD");
const date = ref<SingleOrRange<DateModelType>>([start, start]);

const shortcuts = [
  {
    text: "最近一周", //把近一周的时间赋值 date数据
    value: () => {
      const start = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD");
      const end = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD");
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      return [start, end];
    },
  },
  {
    text: "最近三月",
    value: () => {
      const start = dayjs()
        .subtract(2, "month")
        .startOf("month")
        .format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      return [start, end];
    },
  },
];

/************************* Sales 图表 开始  **************************/
let myEcharts: any;

// 模拟返回来的数据  用随机数来做返回不同数据
const getRandomDate = () => {
  const data = [];
  for (let i = 0; i < 12; i++) {
    data.push(Math.round(Math.random() * 70 + 30));
  }
  return data;
};
const saleChart = ref();
onMounted(() => {
  myEcharts = echarts.init(saleChart.value);
  const option = {
    title: {
      text: "销售趋势",
    },
    xAxis: {
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      // show: false,
    },
    tooltip: {},
    yAxis: {},
    series: {
      type: "bar",
      data: getRandomDate(),
      barWidth: 33,
      itemStyle: {
        // 柱条样式
        color: "#3398db",
      },
    },
    grid: {
      // top: 0,
      bottom: 20,
      left: 0,
      right: 0,
      containLabel: true,
    },
  };

  myEcharts.setOption(option);
});

watch(date, () => {
  myEcharts.setOption({
    series: {
      type: "bar",
      data: getRandomDate(),
    },
  });
});
/************************* Sales 图表 结束  **************************/
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs-tab {
  /* margin-bottom: 20px; */
  height: 60px;
}
</style>

<style>
.el-tabs__item {
  /* padding: 20px; */
  width: 82px;
  height: 50px;
  text-align: center;
  padding: 0px;
}
.sale-header {
  position: relative;
}
.sales-date {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}
.sales-date-radio {
  /* position: absolute; */
  margin-right: 10px;
}
.sale-footer {
  width: 1222px;
  height: 270px;
}
</style>
